<template>
  <view class="edit-layout">
    <my-header title="编辑个人资料"></my-header>
    <my-content class="content">
      <view class="user_box">
        <view class="user_item avatar">
          <view class="avatar-item" @click="upload">
            <image class="avatar-icon" :src="userData.avatar"></image>
            <image class="edit-avatar" src="https://www.dingxians.cn/images/user/edit-avatar.png" mode="scaleToFill" />
          </view>

          <!-- <view>我的头像</view> -->
          <!-- <view class="item_right" @click="upload()">
				</view> -->
        </view>
        <view class="user_item">
          <view>ID</view>
          <view>{{ userData.id }}</view>
        </view>
        <view class="user_item">
          <view>手机号码</view>
          <view>{{ userData.mobile }}</view>
        </view>
        <view class="user_item">
          <view>昵称</view>
          <view class="item_right" @click="header(`/pages/user/edit_nickname?nickname=${userData.nickname}`)">
            <view>{{ userData.nickname }}</view>
            <image class="right_icon" src="https://www.dingxians.cn/images/common/arrow-right.png"></image>
          </view>
        </view>
        <view class="user_item">
          <view>注销</view>
          <view class="item_right" @click="header(`/pages/user/logout`)">
            <view class="tip">账号注销后无法恢复，请谨慎操作</view>
            <image class="right_icon" src="https://www.dingxians.cn/images/common/arrow-right.png"></image>
          </view>
        </view>
      </view>
    </my-content>
  </view>
</template>

<script>
import api from '../../api/index.js'
import request from '../../api/request.js'
export default {
  data() {
    return {
      userData: {},
      token: '',
    }
  },
  onLoad() {},
  onShow() {
    this.token = uni.getStorageSync('token')
    this.userData.nickname = uni.getStorageSync('nickname')
    this.userData.avatar = uni.getStorageSync('avatar')
    this.userData.id = uni.getStorageSync('user_id')
    this.userData.mobile = uni.getStorageSync('mobile')
    this.getUser()
  },

  methods: {
    update() {
      api.users
        .update({ avatar: this.userData.avatar })
        .then((res) => {
          if (res.code === 200) {
            this.show('修改成功')
          }
        })
        .catch((error) => {
          console.log(error)
        })
    },
    getUser() {
      uni.showLoading({
        title: '数据加载中',
      })
      api.users
        .show()
        .then((res) => {
          if (res.code === 200) {
            uni.hideLoading()
            this.userData = res.data
          }
        })
        .catch((error) => {
          console.log(error)
        })
    },
    upload(e) {
      var count = 1
      uni.chooseImage({
        count: count,
        sizeType: ['compressed'],
        sourceType: ['album', 'camera'],
        success: (res) => {
          var tempFilePaths = res.tempFilePaths
          uni.showLoading({
            title: '图片上传中',
            mask: true,
          })
          for (var x = 0; x < res.tempFilePaths.length; x++) {
            uni.uploadFile({
              url: `${request.url}common/upload?token=${this.token}`,
              name: 'file',
              filePath: res.tempFilePaths[x],
              success: (r) => {
                uni.hideLoading()
                var data = JSON.parse(r.data)
                this.userData.avatar = data.data.url
                // 修改头像
                this.update()
              },
            })
          }
        },
        error: (res) => {
          console.log(res)
        },
      })
    },
  },
}
</script>

<style lang="scss">
.edit-layout {
  background-color: #171717;
  height: 100vh;
}
.content {
  background-color: #171717;
  height: 100vh;
}
.user_box {
  display: flex;
  flex-direction: column;
  color: white;
  font-size: 32rpx;
  .user_item {
    display: flex;
    padding: 0 40rpx;
    justify-content: space-between;
    height: 100rpx;
    line-height: 100rpx;
    align-items: center;

    &.avatar {
      height: 280rpx;
      line-height: 280rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      padding-top: 30rpx;
    }

    .avatar-item {
			position: relative;
      height: 201rpx;
      width: 201rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      background-image: url('https://www.dingxians.cn/upload/user_static/common/icon-border.png');
      background-size: 100% 100%;
      .avatar-icon {
        border-radius: 50%;
        height: 152rpx;
        width: 152rpx;
      }

			.edit-avatar {
				position: absolute;
				right: -30rpx;
				bottom: 0;
				width: 46rpx;
				height: 46rpx;
			}
    }

    .item_right {
      display: flex;
      align-items: center;
      .avatar {
        width: 100rpx;
        height: 100rpx;
        border-radius: 50%;
      }
      .right_icon {
        margin-left: 20rpx;
        width: 22rpx;
        height: 22rpx;
      }
      .tip {
        font-size: 26rpx;
        color: red;
      }
    }
  }
}
</style>
